
<h1>HTML编码规范</h1>
<h2>1 前言</h2>
<p>HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。</p>
<h2>2 代码风格</h2>

<h3>2.1 命名</h3>
<h4>[强制] <code>class</code> 必须单词全字母小写，单词间以 <code>-</code> 分隔。</h4>
<h4>[强制] <code>class</code> 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。</h4>
<h4>[强制] 元素 <code>id</code> 必须保证页面唯一。</h4>
<p>解释：</p>
<p>同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。</p>
<h4>[建议] <code>id</code> 建议采用驼峰式命名。同项目必须保持风格一致。</h4>
<h4>[强制] 禁止为了 <code>hook 脚本</code>，创建无样式信息的 <code>class</code>。</h4>
<p>解释：</p>
<p>不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。</p>
<p>使用 id、属性选择作为 hook 是更好的方式。</p>
<h4>[强制] 同一页面，应避免使用相同的 <code>name</code> 与 <code>id</code>。</h4>
<p>解释：</p>
<p>IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。</p>
<p>一个比较好的实践是，为 id 和 name 使用不同的命名法。</p>
<h3>2.2 标签</h3>
<h4>[强制] 标签名必须使用小写字母。</h4>
<h4>[强制] 对于无需自闭合的标签，不允许自闭合。</h4>
<p>解释：</p>
<p>常见无需自闭合标签有input、br、img、hr等。</p>
<h4>[强制] 对 <code>HTML5</code> 中规定允许省略的闭合标签，不允许省略闭合标签。</h4>
<p>解释：</p>
<p>对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。</p>
<h4>[强制] 标签使用必须符合标签嵌套规则。</h4>
<p>解释：</p>
<p>比如 div 不得置于 p 中，tbody 必须置于 table 中。</p>
<p>详细的标签嵌套规则参见<a href="http://www.cs.tut.fi/~jkorpela/html5.dtd">HTML DTD</a>中的 <code>Elements</code> 定义部分。</p>
<h4>[建议] <code>HTML</code> 标签的使用应该遵循标签的语义。</h4>
<p>解释：</p>
<p>下面是常见标签语义</p>
<ul>
    <li>p - 段落</li>
    <li>h1,h2,h3,h4,h5,h6 - 层级标题</li>
    <li>strong,em - 强调</li>
    <li>ins - 插入</li>
    <li>del - 删除</li>
    <li>abbr - 缩写</li>
    <li>code - 代码标识</li>
    <li>cite - 引述来源作品的标题</li>
    <li>q - 引用</li>
    <li>blockquote - 一段或长篇引用</li>
    <li>ul - 无序列表</li>
    <li>ol - 有序列表</li>
    <li>dl,dt,dd - 定义列表</li>
</ul>
<h4>[建议] 在 <code>CSS</code> 可以实现相同需求的情况下不得使用表格进行布局。</h4>
<p>解释：</p>
<p>在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。</p>
<h4>[建议] 标签的使用应尽量简洁，减少不必要的标签。</h4>

<h2>3 通用</h2>
<h3>3.1 DOCTYPE</h3>
<h4>[强制] 使用 <code>HTML5</code> 的 <code>doctype</code> 来启用标准模式，建议使用大写的 <code>DOCTYPE</code>。</h4>
<p>示例：&lt;!DOCTYPE html&gt;</p>
<h3>3.2 编码</h3>
<h4>[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 <code>meta</code> 必须是 <code>head</code> 的第一个直接子元素。</h4>
<h4>[建议] <code>HTML</code> 文件使用无 <code>BOM</code> 的 <code>UTF-8</code> 编码。</h4>
<p>解释：</p>
<p>UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。</p>
<h3>3.3 CSS和JavaScript引入</h3>
<h4>[强制] 引入 <code>CSS</code> 时必须指明 <code>rel="stylesheet"</code>。</h4>
<h4>[建议] 引入 <code>CSS</code> 和 <code>JavaScript</code> 时无须指明 <code>type</code> 属性。</h4>
<p>解释：</p>
<p><code>text/css</code> 和 <code>text/javascript</code> 是 type 的默认值。</p>
<h4>[建议] 展现定义放置于外部 <code>CSS</code> 中，行为定义放置于外部 <code>JavaScript</code> 中。</h4>
<p>解释：</p>
<p>结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。</p>
<h4>[建议] 在 <code>head</code> 中引入页面需要的所有 <code>CSS</code> 资源。</h4>
<p>解释：</p>
<p>在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。</p>
<h4>[建议] <code>JavaScript</code> 应当放在页面末尾，或采用异步加载。</h4>
<p>解释：</p>
<p>将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。</p>
<h4>[建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 <code>URL</code> 协议部分与页面相同，建议省略协议前缀。</h4>
<p>解释：</p>
<p>使用 <code>protocol-relative URL</code> 引入 CSS，在 <code>IE7/8</code> 下，会发两次请求。是否使用 <code>protocol-relative URL</code> 应充分考虑页面针对的环境。</p>
<p>示例：</p>
<h2>4 head</h2>
<h3>4.1 title</h3>
<h4>[强制] 页面必须包含 <code>title</code> 标签声明标题。</h4>
<h4>[强制] <code>title</code> 必须作为 <code>head</code> 的直接子元素，并紧随 <code>charset</code> 声明之后。</h4>
<p>解释：</p>
<p>title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。</p>


